<template>
  <van-tabbar v-model="active" fixed>
    <van-tabbar-item icon="home" @click = "gotoAddress('0')">首页</van-tabbar-item>
    <van-tabbar-item icon="more-o" @click = "gotoAddress('1')">分类</van-tabbar-item>
    <van-tabbar-item icon="cart" v-bind:info="info" @click = "gotoAddress('2')">购物车</van-tabbar-item>
    <van-tabbar-item icon="contact" @click = "gotoAddress('3')">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: 'TabBar',
  data () {
    return {
      path: '',
      active: 0,
      tabBar: ['/home', '/classify', '/cart', '/user']
    }
  },
  props: ['info', 'index'], // 组件的参数传递info：购物车数量index:索引
  created () {
    if (this.index != null) {
      this.active = this.index
    } else {
      this.active = this.tabBar.indexOf(this.$route.path)
    }
  },
  watch: {
    '$route' (to, from) {
      this.active = this.tabBar.indexOf(to.path)
    }
  },
  methods: {
    gotoAddress (index) {
      this.$router.push(this.tabBar[index])
    }
  }
}
</script>
